<template>
	<view class="">
		<view class="cost-stick">
			<view class="sum-data">
				<view class="sum-type" v-if="currentSelect">
					<view class="type-head">
						<view class="head-title">
							{{ currentSelect.name }}
						</view>
						<view class="money-type">
							<view class="item" :class="currentType == 0 ? 'on' : ''" @click="selectType(0)">广告收益</view>
							<view class="item" :class="currentType == 1 ? 'on' : ''" @click="selectType(1)">支付收益</view>
						</view>
					</view>
					<view class="type-body">
						<view class="text">
							<view v-if="currentType === 0">{{ currentSelect.today }} <text class="num">{{ userIncomeData ? userIncomeData.todayIncome.estimate_income : '0' }}</text></view>
              <view v-else-if="userMemberOrderIncomeData">{{ currentSelect.today }} <text class="num">{{ userMemberOrderIncomeData.todayIncome.commission_price }}</text></view>
						</view>
						<view class="text">
							<view v-if="currentType === 0">{{ currentSelect.yesterday }} <text class="num">{{ userIncomeData ? userIncomeData.yesterdayIncome.final_income : '0' }}</text></view>
							<view v-else-if="userMemberOrderIncomeData">{{ currentSelect.yesterday }} <text class="num">{{ userMemberOrderIncomeData.yesterdayIncome.commission_price }}</text></view>
						</view>
					</view>
				</view>
				<view class="my-collect-tabs">
					<view :class="currentIndex == 2 ? 'tab on' : 'tab'" @click="selectClick(2, 'mp-toutiao')">抖音</view>
          <view :class="currentIndex == 5 ? 'tab on' : 'tab'" @click="selectClick(5, 'mp-kuaishou')">快手</view>
					<view :class="currentIndex == 3 ? 'tab on' : 'tab'" @click="selectClick(3, 'mp-weixin')">微信</view>
					<!-- <view :class="currentIndex == 4 ? 'tab on' : 'tab'" @click="selectClick(4, 'mp-qq')">QQ</view> -->
				</view>
				<view class="my-grid">
					<template v-if="currentType === 0">
            <view class="today-income income-title">今日数据</view>
            <view class="today-income income-title">昨日数据</view>
            <view class="today-income">
              <view class="item-grid">
                <view class="grid-num">{{ userIncomeData ? userIncomeData.todayIncome.views_num || 0 : '0' }}</view>
                <view class="grid-text">访问人数</view>
              </view>
              <view class="item-grid">
                <view class="grid-num">{{ userIncomeData ? userIncomeData.todayIncome.download_num || 0 : '0' }}</view>
                <view class="grid-text">下载次数</view>
              </view>
              <view class="item-grid">
                <view class="grid-num">{{ userIncomeData ? userIncomeData.todayIncome.estimate_avg_ecpm || 0 : '0' }}</view>
                <view class="grid-text">预估eCPM</view>
              </view>
              <view class="item-grid">
                <view class="grid-num">{{ userIncomeData ? userIncomeData.todayIncome.estimate_income || 0 : '0' }}</view>
                <view class="grid-text">预估金额</view>
              </view>
            </view>
            <view class="yesterday-income">
              <view class="item-grid">
                <view class="grid-num">{{ userIncomeData ? userIncomeData.yesterdayIncome.views_num || 0 : '0' }}</view>
                <view class="grid-text">访问人数</view>
              </view>
              <view class="item-grid">
                <view class="grid-num">{{ userIncomeData ? userIncomeData.yesterdayIncome.download_num || 0 : '0'  }}</view>
                <view class="grid-text">下载次数</view>
              </view>
              <view class="item-grid">
                <view class="grid-num">{{ userIncomeData ? userIncomeData.yesterdayIncome.final_avg_ecpm || 0 : '0'  }}</view>
                <view class="grid-text">实际eCPM</view>
              </view>
              <view class="item-grid">
                <view class="grid-num">{{ userIncomeData ? userIncomeData.yesterdayIncome.final_income || 0 : '0'  }}</view>
                <view class="grid-text">实际金额</view>
              </view>
            </view>
          </template>
					<template v-else-if="userMemberOrderIncomeData">
            <view class="today-income income-title">今日数据</view>
            <view class="today-income income-title">昨日数据</view>
						<view class="today-income">
              <view class="item-grid">
                <view class="grid-num">{{ userMemberOrderIncomeData.todayIncome.order_num || 0 }}</view>
                <view class="grid-text">订单数量</view>
              </view>
              <view class="item-grid">
                <view class="grid-num">{{ userMemberOrderIncomeData.todayIncome.total_price || 0 }}</view>
                <view class="grid-text">成交金额</view>
              </view>
              <view class="item-grid">
                <view class="grid-num">{{ userMemberOrderIncomeData.todayIncome.views_num || 0 }}</view>
                <view class="grid-text">访问人数</view>
              </view>
              <!-- <view class="item-grid">
                <view class="grid-num">{{ userMemberOrderIncomeData.todayIncome.member_proportion || 0 }}</view>
                <view class="grid-text">分佣比例</view>
              </view> -->
              <view class="item-grid">
                <view class="grid-num">{{ userMemberOrderIncomeData.todayIncome.commission_price || 0 }}</view>
                <view class="grid-text">我的佣金</view>
              </view>
            </view>
            <view class="yesterday-income">
              <view class="item-grid">
                <view class="grid-num">{{ userMemberOrderIncomeData.yesterdayIncome.order_num || 0 }}</view>
                <view class="grid-text">订单数量</view>
              </view>
              <view class="item-grid">
                <view class="grid-num">{{ userMemberOrderIncomeData.yesterdayIncome.total_price || 0 }}</view>
                <view class="grid-text">成交金额</view>
              </view>
              <view class="item-grid">
                <view class="grid-num">{{ userMemberOrderIncomeData.yesterdayIncome.views_num || 0}}</view>
                <view class="grid-text">访问人数</view>
              </view>
              <!-- <view class="item-grid">
                <view class="grid-num">{{ userMemberOrderIncomeData.yesterdayIncome.member_proportion || 0 }}</view>
                <view class="grid-text">分佣比例</view>
              </view> -->
              <view class="item-grid">
                <view class="grid-num">{{ userMemberOrderIncomeData.yesterdayIncome.commission_price || 0 }}</view>
                <view class="grid-text">我的佣金</view>
              </view>
            </view>
					</template>
				</view>
			</view>
			<view class="recent-week" v-if="userIncomeData && currentType === 0"  @click="goMap">
				<view class="">
					{{currentSelect.text10}}：<text class="txt">{{ userIncomeData.weekEcpm }}</text>
				</view>
				<view class="more">
					查看更多<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
      <!-- 操作栏 -->
			<view class="yugu-filter">
				<view class="tit">
					<Title title="收益明细" :custom-style="{
            'marginBottom': '24rpx',
            'marginTop': '24rpx',
            'fontSize': '32rpx',
            'fontWeight': '700',
            'color': '#333'
          }"></Title>
				</view>
        <view class="right-container">
          <view
            class="btn ma"
            :class="{
              'active-btn': codingFlag
            }"
            @click="codingFlag = !codingFlag">
            <u-icon name="grid"></u-icon>
            一键打码
          </view>
          <view
            class="btn"
            :class="{
              'active-btn': filterFlag
            }"
            @click="filterFlag = !filterFlag">
            <u-icon name="search"></u-icon>
            筛选
          </view>
        </view>
			</view>
		</view>
    <!-- 搜索 -->
    <view v-if="filterFlag" class="search-container">
      <view class="screen_item" @click="showTime = true">
        <u-icon name="calendar" color="#56d39d" size="28"></u-icon>
        <view class="center-text">{{ dateStr }}</view>
        <u-icon name="play-right-fill" class="right-icon" color="#d9d3d2" size="28"></u-icon>
      </view>
      <view class="screen_item" @click="codeInfo.showSelect = true">
        <u-icon name="lock" color="#56d39d" size="28"></u-icon>
        <view class="center-text">{{ code }}</view>
        <u-icon name="play-right-fill" class="right-icon" color="#d9d3d2" size="28"></u-icon>
      </view>
      <view class="screen_bottom">
        <view class="item">
          <view class="num">{{ totalDownloadNum }}</view>
          <view class="lable">{{ currentType === 0 ? '下载次数' : '订单数量' }}</view>
        </view>
        <view class="item item_xian">
          <view class="num">{{ totalEstimateAmount }}</view>
          <view class="lable">预估收入</view>
        </view>
        <view class="item">
          <view class="num">{{ totalSettleAmount }}</view>
          <view class="lable">实际收入</view>
        </view>
      </view>
    </view>
    <!-- 列表 -->
		<view class="list" v-if="!noData">
			<view class="item" v-for="(item, index) in recordList" :key="index">
				<template v-if="item.video_cover_url || item.cover_url">
					<image
            :src="item.video_cover_url || item.cover_url"
            class="thumb"
            :class="{
              'coding_blur': codingFlag
            }"
            mode="aspectFill"></image>
				</template>
				<template v-else>
          <view class="thumb-box">
            <image
              v-if="item.payment_type !== 'integral'"
              :src="item.image || 'https://res.guxitk.com/2023/12/05/20231205151204-20231205151110.png'"
              class="thumb"
              :class="{
                'coding_blur': codingFlag
              }"
              mode="aspectFill"></image>
            <image
              v-else
              src="https://img.alicdn.com/imgextra/i4/1888948409/O1CN011c7pit2BzNS7jKECH_!!1888948409.png"
              class="thumb"
              :class="{
                'coding_blur': codingFlag
              }"
              mode="aspectFill"></image>
            <view class="payment-type">
              <text v-if="item.payment_type === 'integral'">移动积分</text>
              <text v-else-if="item.payment_type === 'weixin'">微信支付</text>
              <text v-else-if="item.payment_type === 'alipay'">支付宝支付</text>
              <text v-else-if="item.payment_type === 'douyin'">抖音支付</text>
              <text v-else-if="item.payment_type === 'applePay'">苹果支付</text>
            </view>
          </view>
				</template>
				<view class="info">
					<view class="name">
						<view class="applet-info">
              <image
                :src="item.logo"
                class="avator"
                :class="{
                  'coding_blur': codingFlag
                }"
                mode="aspectFill"></image>
						  <view
                class="text"
                :class="{
                  'coding_blur': codingFlag
                }">{{item.name}}</view>
            </view>
            <view
            class="code"
            :class="{
              'coding_blur': codingFlag
            }">口令:{{ item.code }}</view>
					</view>
					<view v-if="currentType === 0" class="data">
						<view class="ad-time" v-if="currentSelect">
              <u-icon name="download" color="#4b4b5c" size="24"></u-icon>
              下载次数：<text class="red">{{ item.download_count }}</text>
            </view>
						<view v-if="item.final_total_amount > 0" class="ad-time">
              <u-icon name="rmb-circle" color="#4b4b5c" size="24"></u-icon>
              实际收益：<text class="red">{{ item.final_total_amount }}</text>
            </view>
            <view v-else class="ad-time">
              <u-icon name="rmb-circle" color="#4b4b5c" size="24"></u-icon>
              预估收益：<text class="red">{{ item.estimate_total_amount }}</text>
            </view>
					</view>
          <view v-else class="data">
						<view class="ad-time" v-if="currentSelect">
              <u-icon name="order" color="#4b4b5c" size="24"></u-icon>
              支付订单：<text class="red">{{ item.order_count }}</text>
            </view>
						<view class="ad-time">
              <u-icon name="rmb-circle" color="#4b4b5c" size="24"></u-icon>
              实际收益：<text class="red">{{ item.commission_price }}</text>
            </view>
					</view>
				</view>
        <view class="date-content">{{ item.date }}</view>
			</view>
		</view>
		<view v-if="noData" class="u-flex u-flex-col u-col-center"
			style="width: 100%;height: 48vh;background-color: #FFFFFF;">
			<view class="">
				<image style="width: 300rpx;height: 300rpx;" src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01CSQqUP2BzNNzcB96v_!!1888948409.png"></image>
			</view>
			<view class="u-tips-color u-font-12 u-p-t-30">
				没有数据哦~
			</view>
		</view>
		<view class="" v-if="!noData">
			<u-loadmore :status="loadStatus" :load-text="loadText" font-size="24" margin-top="30" margin-bottom="30"
				color="#B8B8B8" />
		</view>

    <!-- 日期选择 -->
		<u-calendar v-model="showTime" mode="range" @change="search"
			active-bg-color="#56d39d" 
			range-color="#56d39d" 
			range-bg-color="#f3f7fb"
			btn-type="error">
			<view slot="tooltip">
				<view class="btn-back" @click="resetDate">点此回到今天</view>
			</view>
		</u-calendar>

    <!-- 选择口令 -->
    <u-select
      v-model="codeInfo.showSelect"
      :list="codeInfo.codeList"
      confirm-color="#56d39d"
      value-name="code"
      label-name="code"
      @confirm="confirmCode"></u-select>
	</view>
</template>

<script>
import { userIncome, artworksDownloadList, userMemberOrderIncome, memberOrderList } from '@/api/applet';
import { codeByUserId } from '@/api/artworks';
import Title from '@/components/title/title';
import { parseTime } from '@/utils/parseTime';
import { mapGetters } from 'vuex';
export default {
  components: {
    Title
  },
  data() {
    return {
      filterFlag: false,
      codingFlag: false,
      currentIndex: 2,
      recordList: [],
      pageIndex: 1,
      loadStatus: "loadmore",
      noData: false,
      loadText: {
        loadmore: "没有更多预估收益数据了",
        loading: "努力加载中",
        nomore: "没有更多预估收益数据了",
      },
      platform_type: "mp-toutiao",
      creatorInfo: null,
      userIncomeData: null, // 作品收益信息
      userMemberOrderIncomeData: null, // 会员收益信息
      start: "",
      end: "",
      dateStr: "",
      showTime: false,
      sumList: [
        {
          name: "自推CPM收益",
          today: "今日总预估",
          yesterday: "昨日总收益",
          total: 0,
          money: 0,
          text1: "今日浏览",
          text2: "今日下载",
          text3: "预估ecpm",
          text4: "预估收益",
          text5: "昨日浏览",
          text6: "昨日下载",
          text7: "实际ecpm",
          text8: "实际收益",
          text9: "下载次数",
          text10: "近一周平均eCPM",
        },
        {
          name: "自推CPS收益",
          today: "今日总订单",
          yesterday: "昨日总收益",
          total: 0,
          money: 0,
          text1: "今日订单",
          text2: "订单总额",
          text3: "分佣比例",
          text4: "所得佣金",
          text5: "昨日订单",
          text6: "昨日总额",
          text7: "分佣比例",
          text8: "昨日佣金",
          text9: "充值次数",
          text10: "近三天CPS",
        },
      ],
      currentType: 0,
      currentSelect: null,
      totalData: null,
      totalDownloadNum: 0,
      totalEstimateAmount: 0,
      totalSettleAmount: 0,
      code: '全部口令',
      codeInfo: {
        codeList: [],
        showSelect: false,
      },
    };
  },
  watch: {
    '$store.state.userIncomeData': {
      immediate: true,
      handler(val) {
        this.userIncomeData = val;
      }
    }
  },
  async onLoad() {
    this.dateStr = `${parseTime(new Date(), '{y}-{m}-{d}')} - ${parseTime(new Date(), '{y}-{m}-{d}')}`;
    this.currentSelect = this.sumList[this.currentType];
    this.getUserArtworksIncome();
    this.getArtworksDownloadList();
    this.getCodeList();
  },
  async onShow() {
    if (this.userIncomeData || this.userMemberOrderIncomeData) {
      if (this.currentType === 0) {
        this.getUserArtworksIncome();
        this.getArtworksDownloadList(1);
      } else {
        this.getUserMemberIncome();
        this.getMemberOrderList(1);
      }
    }
  },
  methods: {

    // 选择类型
    selectType(index) {
      let that = this;
      this.currentType = index;
      this.currentSelect = this.sumList[index];
      this.recordList = [];
      if (index === 0) {
        this.getUserArtworksIncome();
        this.getArtworksDownloadList(1);
      } else {
        this.getUserMemberIncome();
        this.getMemberOrderList(1);
      }
    },

    // 跳转地图
    goMap() {
      console.log(111)
      uni.navigateTo({
        url: '/pages/earnings/trendChart',
      });
    },

    // 重置信息
    resetDate() {
      this.start = "";
      this.end = "";
      this.dateStr = "";
      this.showTime = false;
      if (this.currentType === 0) {
        this.getArtworksDownloadList(1);
      } else {
        this.getMemberOrderList(1);
      }
    },

    // 时间搜索
    search(e) {
      this.start = e.startDate;
      this.end = e.endDate;
      this.dateStr = e.startDate + " - " + e.endDate;
      if (this.currentType === 0) {
        this.getArtworksDownloadList(1);
      } else {
        this.getMemberOrderList(1);
      }
    },

    // 切换平台
    selectClick(index, type) {
      //console.log(type);
      let that = this;
      that.currentIndex = index;
      that.pageIndex = 1;
      that.platform_type = type;
      if (this.currentType === 0) {
        that.getUserArtworksIncome();
        this.getArtworksDownloadList(1);
      } else {
        that.getUserMemberIncome();
        this.getMemberOrderList(1);
      }
    },

    // 获取作品下载列表
    async getArtworksDownloadList(on) {
      let that = this;
      that.loadStatus = "loading";
      var list = {};
      artworksDownloadList({
        startTime: that.start,
        endTime: that.end,
        platform_type: that.platform_type,
        code: that.code === '全部口令' ? '' : that.code,
      }).then(result => {
        if (result.code === 200 && result.data && result.data && result.data.length > 0) {
          that.recordList = result.data;
          let totalDownloadNum = 0;
          let totalEstimateAmount = 0;
          let totalSettleAmount = 0;
          result.data.forEach(item => {
            totalDownloadNum += item.download_count;
            totalEstimateAmount += parseFloat(item.estimate_total_amount);
            totalSettleAmount += parseFloat(item.final_total_amount);
          })
          that.totalDownloadNum = totalDownloadNum;
          that.totalEstimateAmount = totalEstimateAmount.toFixed(2);
          that.totalSettleAmount = totalSettleAmount.toFixed(2);
          that.loadStatus = "nomore";
          that.noData = false;
        } else {
          that.totalDownloadNum = 0;
          that.totalEstimateAmount = 0;
          that.totalSettleAmount = 0;
          that.noData = true;
        }
      });
    },

    // 获取作品下载列表
    async getMemberOrderList(on) {
      let that = this;
      that.loadStatus = "loading";
      var list = {};
      memberOrderList({
        startTime: that.start,
        endTime: that.end,
        platform_type: that.platform_type,
        code: that.code === '全部口令' ? '' : that.code,
      }).then(result => {
        if (result.code === 200 && result.data && result.data && result.data.length > 0) {
          that.recordList = result.data;
          let totalDownloadNum = 0;
          let totalEstimateAmount = 0;
          let totalSettleAmount = 0;
          result.data.forEach(item => {
            totalDownloadNum += item.order_count;
            totalEstimateAmount += parseFloat(item.commission_price);
            totalSettleAmount += parseFloat(item.commission_price);
          })
          that.totalDownloadNum = totalDownloadNum;
          that.totalEstimateAmount = totalEstimateAmount.toFixed(2);
          that.totalSettleAmount = totalSettleAmount.toFixed(2);
          that.loadStatus = "nomore";
          that.noData = false;
        } else {
          that.totalDownloadNum = 0;
          that.totalEstimateAmount = 0;
          that.totalSettleAmount = 0;
          that.noData = true;
        }
      });
    },

    // 获取作品预估收益信息信息
    async getUserArtworksIncome() {
      let that = this;
      uni.showLoading({title: '加载中...'});
      userIncome({
        platform_type: this.platform_type
      }).then((result) => {
        uni.hideLoading();
        if (result.code === 200 && result.data) {
          that.userIncomeData = result.data;
        }
      }).catch(() => {
        uni.hideLoading();
      });
    },

    // 获取会员订单收入信息
    async getUserMemberIncome() {
      let that = this;
      userMemberOrderIncome({
        platform_type: this.platform_type
      }).then((result) => {
        if (result.code === 200 && result.data) {
          const data = result.data;
          data.yesterdayIncome.commission_price = (data.yesterdayIncome.commission_price || 0).toFixed(2);
          data.yesterdayIncome.total_price = (data.yesterdayIncome.total_price || 0).toFixed(2);
          data.todayIncome.commission_price = (data.todayIncome.commission_price || 0).toFixed(2);
          data.todayIncome.total_price = (data.todayIncome.total_price || 0).toFixed(2);
          data.yesterdayIncome.views_num = (data.yesterdayIncome.order_num *1.5).toFixed(0);
          data.todayIncome.views_num = (data.todayIncome.order_num *1.5).toFixed(0);
          that.userMemberOrderIncomeData = result.data;
        }
      });
    },

    // 获取code信息列表
    getCodeList() {
      codeByUserId().then(result => {
        if (result && result.data && result.data.length > 0) {
          this.codeInfo.codeList = [
            ...[{
              id: '',
              code: '全部口令'
            }],
            ...result.data
          ];
        }
      })
    },

    // 确定选择口令
    confirmCode(val) {
      this.code = val[0].value;
      if (this.currentType === 0) {
        this.getArtworksDownloadList(1);
      } else {
        this.getMemberOrderList(1);
      }
    },

    // 个人中心数据
    async getWechatCreatorCenterRecord(cId) {
      let that = this;
      this.$u.api
        .wechatCreatorCenterRecord({
          cId: cId,
        })
        .then((result) => {
          //that.totalData = result.data;
          that.sumList[0].total = result.data.todayYu;
          that.sumList[0].money = result.data.yesterdayMoney;
          that.sumList[1].total = result.data.todayRechargeTotal;
          that.sumList[1].money = result.data.todayRechargeMoney;
        });
    },
  },
  onPullDownRefresh() {
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 2 * 1000);
    if (this.currentType === 0) {
      this.getUserArtworksIncome();
      this.getArtworksDownloadList(1);
    } else {
      this.getUserMemberIncome();
      this.getMemberOrderList(1);
    }
  },
};
</script>

<style lang="scss">
.cost-stick {
  background-color: #f8f8f8;
  z-index: 999;
}
.sum-data {
  background-color: $uni-color-primary;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 20rpx;
}
.sum-type {
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}
.sum-type .type-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: solid 1rpx #f8f8f8;
  padding: 20rpx;
}
.sum-type .type-head .money-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f3f7fb;
  font-size: 24rpx;
}
.sum-type .type-head .head-title {
  font-weight: bold;
  font-style: italic;
}
.sum-type .type-head .money-type .item {
  padding: 10rpx 14rpx;
  color: #000;
  font-weight: bold;
  border-radius: 6rpx;
}
.sum-type .type-head .money-type .item.on {
  background-color: $uni-color-primary;
  color: #fff;
}
.sum-type .type-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
}
.sum-type .type-body .text text {
  color: $uni-color-primary;
  margin-left: 20rpx;
}
.my-collect-tabs {
  display: flex;
  border-radius: 20rpx 20rpx 0 0;
  align-items: center;
  background-color: #fff;
}

.my-collect-tabs .tab {
  width: 100%;
  padding: 20rpx 0;
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

.my-collect-tabs .tab.on {
  position: relative;
  font-weight: bold;
  font-size: 28rpx;
  color: $uni-color-primary;
}

.my-collect-tabs .tab.on::after {
  content: "";
  position: absolute;
  bottom: 10rpx;
  left: 50%;
  margin-left: -20rpx;
  width: 30rpx;
  height: 4rpx;
  border-radius: 2rpx;
  background-color: $uni-color-primary;
}

.search-container{
  margin: 20rpx;
  border: 2rpx solid $uni-color-primary;
  border-radius: 8rpx;
  padding: 24rpx;
  background-color: #f3f7fb;

  .screen_item{
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
    padding: 0 24rpx;
    width: 100%;
    height: 66rpx;
    background: #fff;
    border-radius: 8rpx;
    font-size: 26rpx;
    color: $uni-color-primary;
    position: relative;
  }

  .center-text{
    color: $uni-color-primary;
    margin-left: 12rpx;
  }

  .right-icon{
    position: absolute;
    right: 24rpx;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .screen_bottom{
    padding: 0 20rpx;
    width: 100%;
    height: 104rpx;
    background: #fff;
    border-radius: 8rpx;
    display: flex;

    .item{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-flow: column;
      position: relative;
      text-align: center;
      background: #fff;
      height: 52px;
      color: #4b4b5c;
      position: relative;

      .num{
        color: $uni-color-primary;
        font-size: 26rpx;
        margin-bottom: 6rpx;
      }

      .lable{
        font-size: 28rpx;
      }
    }

    .item_xian::after{
      position: absolute;
      left: 0;
      z-index: 2;
      content: "";
      background: #eee;
      border-left: 1rpx #eee solid;
      height: 62rpx;
    }

    .item_xian::before{
      position: absolute;
      right: 0;
      z-index: 2;
      content: "";
      background: #eee;
      border-left: 1rpx #eee solid;
      height: 62rpx;
    }
  }
}

.list {
  margin: 20rpx;
}

.list .item {
  padding: 20rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 20rpx;
  margin-bottom: 24rpx;
  box-shadow: 0rpx 1rpx 10rpx 2rpx #d5dcf0;
  position: relative;
}

.list .item .date-content{
  text-align: center;
  width: 210rpx;
  height: 30rpx;
  line-height: 30rpx;
  background: #f4f4f4;
  border-radius: 0 0 10rpx 10rpx;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  font-size: 20rpx;
  color: #999;
  -webkit-clip-path: polygon(0 0,100% 0,90% 100%,10% 100%);
  clip-path: polygon(0 0,100% 0,90% 100%,10% 100%);
}

.list .item .thumb-box{
  width: 130rpx;
  height: 130rpx;
  border-radius: 10rpx;
  position: relative;
  overflow: hidden;
}

.list .item .payment-type{
  width: 100%;
  background-color: rgba($color: $uni-color-primary, $alpha: .6);
  height: 36rpx;
  position: absolute;
  bottom: 0;
  border-radius: 8rpx;
  font-size: 20rpx;
  line-height: 36rpx;
  text-align: center;
  color: #fff;
}

.list .item .thumb,
.list .item .vip {
  width: 130rpx;
  height: 130rpx;
  border-radius: 10rpx;
}
.list .item .vip {
  background-color: #ffcc00;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-weight: bold;
}

.list .item .info {
  margin-left: 30rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.list .item .info .name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.list .item .info .applet-info{
  display: flex;
  align-items: center;
}
.list .item .info .code{
  font-size: 24rpx;
  color: #4b4b5c;
}
.list .item .info .avator {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
}
.list .item .info .data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f3f7fb;
  border-radius: 4rpx;
  padding: 6rpx 16rpx;
}
.list .item .info .text {
  margin-left: 12rpx;
}
.list .item .info .ad-time {
  color: #4b4b5c;
  flex: 1;
  font-size: 24rpx;
}
.list .item .info .red {
  color: $uni-color-primary;
}

.list .item .info .green {
  color: #21cc47;
}

.grid-num {
  font-size: 30rpx;
  color: #000;
  font-weight: bold;
}
.grid-text {
  padding-top: 10rpx;
  color: #666;
  font-size: 24rpx;
}
.my-grid {
  border-radius: 0 0 20rpx 20rpx;
  background-color: #f3f7fb;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.today-income,
.yesterday-income{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  width: 50%;
  position: relative;
}

.income-title{
  font-size: 24rpx;
  padding-top: 32rpx;
}

.today-income::after{
  display: block;
  content: '';
  position: absolute;
  border-right: 2rpx solid #9ccac6;
  right: 0;
  top: 40rpx;
  bottom: 40rpx;
  margin: auto;
}

.item-grid {
  width: 50%;
  text-align: center;
  padding: 30rpx 0;
}
.yugu-filter {
  margin: 20rpx 0;
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f8f8f8;
}
.yugu-filter .tit {
  font-size: 34rpx;
  font-weight: bold;
}
.yugu-filter .right-container{
  display: flex;
}
.yugu-filter .right-container .ma{
  margin-right: 24rpx;
}
.yugu-filter .btn {
  background-color: #fff;
  padding: 10rpx 24rpx;
  border-radius: 30rpx;
  display: flex;
  border: 2rpx solid #eaeaea;
}
.yugu-filter .active-btn{
  border-color: $uni-color-primary;
  color: $uni-color-primary;
  background: #f3f7fb;
}
.yugu-filter .btn .date-str {
  color: #666;
  padding-right: 20rpx;
}
.btn-back {
  width: 240rpx;
  height: 88rpx;
  text-align: center;
  line-height: 88rpx;
  background-color: $uni-color-primary;
  color: #fff;
  margin: 0 auto;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
}
.recent-week {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  margin: 0 20rpx;
  border-radius: 20rpx;
  padding: 20rpx;
}
.recent-week .txt {
  color: $uni-color-primary;
}
.coding_blur{
  filter: blur(15px) !important;
}
</style>
